import {Button, Card,Form,Input,message} from 'antd'
import {UserOutlined,LockOutlined} from '@ant-design/icons'
import './Login.scss'
import {validatePwd} from '@/validate/validateLogin'
import {LoginType} from '@/types/User'

// import {useDispatch} from 'react-redux'
import {useAppDispatch} from '@/store/hooks'
import {loginAsync} from '@/store/modules/userSlice'
import {LoginStatusEnum} from '@/types/RabbitEnum'
import withRouter from '@/router/withRouter'
import {LoginProps} from '@/types/User'
import {getMenuAsync} from '@/store/modules/menuSlice'

const Login=(props:LoginProps):JSX.Element=>{
    const dispath=useAppDispatch()
    const login=async(arg:LoginType)=>{
        console.log('------登录------');
        console.log('arg',arg); 
        const result=await dispath(loginAsync(arg))   
        if(result===LoginStatusEnum.SUCCESS){
            message.success('登录成功')
            //此处向状态机发送请求
            dispath(getMenuAsync(arg.username))
            props.navigate("/home")
        }else{
            message.warning('登录失败')
        }
    }
    return <div className="login-container">
        <Card className='login-box'>
           <Form onFinish={login}>
                <Form.Item
                    name="username" 
                    rules={[
                        {
                            required:true,
                            message:"用户名不能为空"
                        }
                    ]} 
                    hasFeedback
                    validateTrigger="onBlur">
                    <Input prefix={<UserOutlined></UserOutlined>}></Input>
                </Form.Item>
                <Form.Item 
                    name="password"
                    rules={[
                        {
                            validator:validatePwd
                        }
                    ]}
                    hasFeedback
                    validateTrigger="onBlur">
                    <Input.Password prefix={<LockOutlined></LockOutlined>}></Input.Password>
                </Form.Item>
                <Form.Item>
                    <Button type='primary' className='login-btn' htmlType='submit'>登录</Button>
                </Form.Item>
           </Form>
        </Card>  
    </div>
}
export default withRouter(Login)